<template>
   <el-dialog title="" visible :show-close="false" :modal-append-to-body="false" class="wrap" @close="cancel" >
		<i class="el-icon-close close" @click="cancel" style="color: white;z-index:10;"></i>
        <div class="bt">个人信息</div>
        <el-form label-width="100px" class="form">
            <el-form-item label="头像">
                <el-upload
                  class="avatar-uploader"
                  :action="imgurl"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="zwm" class="select-block"></el-input>
            </el-form-item>
            <el-form-item label="签名">
                <el-input v-model="qm" class="select-block"></el-input>
                </el-select>
           </el-form-item>
        </el-form>
        <el-button type="primary" class="submit" @click="submit">保存</el-button>
        <el-button type="danger" class="submit" @click="cancel">退出</el-button>
    </el-dialog>
</template>

<script type="text/javascript">
import qs from 'qs'
    export default {
        props: ['params'],
        data () {
            return {
              bqList:[],
              imageUrl: '',
              // imgurl:this.$store.state.api + 'ls/lstx?lsid='+JSON.parse(localStorage.logininfo).id,
              imgurl:this.$store.state.api + '/user/saveimg',
              zwm:'',
              qm:'',
              type: '',
              schoolList: []
            }
        },
        created () {
          var logininfo = JSON.parse(localStorage.logininfo) ;
          this.yhid = logininfo.id
          this.search();//分页获取默认数据
        },
        methods: {
          submit() {
    				this.$store.state.loading = true;
    				var logininfo = JSON.parse(localStorage.logininfo);
    				var params3 = qs.stringify({
    					lsid:logininfo.id,
              tx:this.imageUrl,
              zwm:this.zwm,
              qm:this.qm
    				});
    				//执行
    				this.axios.post(this.$store.state.api + 'ls/lstx', params3)
    					.then(res => {
    						if(res.data.code == 1) {
                                this.$emit('close',{type:'useredit',cancel:true})
    							this.$store.state.loading = false;
    						} else {
    							this.$store.state.loading = false;
    						}
    					}).catch(res => {
    						this.$message.warning("服务器繁忙，请重试");
    						//this.$emit('close', { type: 'add', cancel: false });
    						this.$store.state.loading = false;
    					})
    			},
          search () {
		    //查询搜索触发事件
            var logininfo = JSON.parse(localStorage.logininfo) ;
            var params3 = qs.stringify({
              id:logininfo.id,
              xxid:logininfo.xxid,
              yhid:logininfo.id
						});
              this.searchLoading = true;
              this.axios.post(this.$store.state.api + 'ls/info',params3)
              .then( res => {
                  console.log(res,111)
                  this.imageUrl = res.data.data.tx
                  this.qm = res.data.data.qm
                  this.zwm = res.data.data.zwm

                  this.searchLoading = false;
              }).catch( res => {
                  console.log(res)
                  this.searchLoading = false;
              })
          },
          handleAvatarSuccess(res, file) {
            console.log(file)
            console.log(res)
            // this.imageUrl = URL.createObjectURL(file.raw);
            this.imageUrl = file.response
            console.log(this.imageUrl)
        },
        beforeAvatarUpload(file) {
    			// const isJPG = file.type === 'image/jpeg';
    			// const isLt2M = file.size / 1024 / 1024 < 2;

    			// if (!isJPG) {
    			// 	this.$message.error('上传头像图片只能是 JPG 格式!');
    			// }
    			// if (!isLt2M) {
    			// 	this.$message.error('上传头像图片大小不能超过 2MB!');
    			// }
    			// return  isLt2M;
    		},


            cancel () {
                this.$emit('close',{type:'useredit',cancel:true})
            }
        }
    }
</script>

<style lang="less" scoped>
    .wrap {
	text-align: center;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.bt{
		position: absolute;
		width: 100%;
		height: 50px;
		margin: 0 auto;
		top: 0;
		left: 0;
		background: #50BFFF;
		color:white;
		text-align:left;
		line-height: 50px;
		font-size: 16px;
		padding-left: 15px;
	}

.form {
	text-align: left;
	margin-top: 8px;
}
 .input {
					width: 300px;
					display: inline-block;
			}

.select-block {
	// display: block;
	float: left;
	width: 45%;

}
.select-block2 {
	// display: block;
	float: left;
	width: 95%;
	.tjlx{
		// border: 1px solid #D3EEC7;
		// color: #67C23A;
		// border-radius: 5px;
		// text-align: center;
		// line-height: 30px;
	}
	.tjlx:hover{
		background-color: #67C23A;
		cursor:pointer;
		color: #fff;
	}
}

.submit {
	width: 120px;
	margin-top: 10px;
}
</style>
